<template>
	<div>
	
	<van-nav-bar
	  title="我的收藏"
	  left-arrow  
	   @click-left="onClickLeft"
		class="dan-k"
/>

<!-- 标签页 -->
<van-tabs @click="onClick" background='#EAEAEA' type="link"  color='#FFBBBBBB' line-width='79px' >
  <van-tab title="食谱">
     <van-card
     		 class="fk"
     		  :title="item.name"
     		  :desc="item.text"
     		  :thumb="item.imge"
     		  v-for="(item,i) in food"	
			   :key="i"		  
     />
	 
  </van-tab>
  <van-tab title="营养计划">
	  <van-card
	  		 class="fk"
	  		  :title="item.name"
	  		  :desc="item.text"
	  		  :thumb="item.imge"
	  		  v-for="(item,i) in food"
				:key="i"
	  />
	  
  </van-tab>
</van-tabs>

</div>
</template>

<script>
	import axios from "axios"
	export default{
		name:'Myfavorite',
		data(){
			return{
				food:[]
			}
		},
		methods: {
		 onClickLeft() {
			this.$router.go(-1)
			},
		 onClick(index, title) {
         
    }
			
    },
		mounted(){
			var _this = this;
			axios({
				url:'http://www.food.com/api'
			}).then(function(data){
				_this.food = data.data.food;
				
			})
		}
	}
</script>

<style scoped>
	
	.dan-k{
		width:375px;
		height:42px;		
		background-color: #F9F9F9;	
			
	}
	.van-icon{
		color: #000000;
		font-weight: bold;
	}
	.van-nav-bar__title{						
		color: rgba(100, 100, 100, 1);
		font-size: 14px;
		text-align: center;		
		font-family: Arial;		
	}
	.van-card{
		height: 103px;
		background-color: #FFFFFF;
		padding-top: 60px;
		position: static
	}
	.van-card__content{
		height:98px;
		border-bottom: 1px solid rgba(232,232,232,1);
	}
	.van-card__title{
		margin-top:20px ;
		color: rgba(102, 102, 102, 1);
		font-size: 16px;
		font-family: PingFangSC-regular;
	}
	.van-card__desc{
		color: rgba(153, 153, 153, 1);
		font-size: 12px;
		text-align: left;
	
	}
	.van-image{
		width: 100px;
		height: 100px;	
		border-radius:8px;
		overflow: hidden;
	}
	
	
	
	
	

</style>
